<v-app>
  <div v-resize="resize" style="user-select: none;background-color: white;">
    <dash></dash>
    <viewport ref="viewport"></viewport>
    <v-btn
      fixed
      left
      top
      text
      color="primary"
      style="margin:0%;padding:0%;"
      :style="{height:size+'px', 'margin-left': width / 2 - Math.min(size*4, width/2 - size/4) + 'px'}"
    >
      <div :style="{'font-size':(size * 0.6)+'px'}">{{score}}</div>
    </v-btn>
    <v-container
      fluid
      grid-list-md
      text-xs-center
      :style="{width:size * 6 + 'px', height:height + 'px'}"
      style="padding:0%;touch-action: none;"
    >
      <v-layout row wrap>
        <v-flex xs12 style="display: flex;" :style="{'padding-left': size / 4 + 'px','padding-right': size / 4 + 'px'}">
          <v-btn @click="tap('settings')" :style="style" text :ripple="false">
            <v-icon :size="size * 0.8">widgets</v-icon>
          </v-btn>
          <v-btn @click="tap('tune')" :style="style" text :ripple="false">
            <v-icon :size="size * 0.8">settings</v-icon>
          </v-btn>
          <v-btn @click="tap('strip')" :style="style" text :ripple="false">
            <v-icon :size="size * 0.8">visibility</v-icon>
          </v-btn>
          <v-btn @click="tap('shuffle')" :style="style" text :ripple="false">
            <v-icon :size="size * 0.8">casino</v-icon>
          </v-btn>
          <v-btn @click="tap('undo')" :style="style" text :ripple="false" :disabled="cuber.history.length == 0">
            <v-icon :size="size * 0.8">backspace</v-icon>
          </v-btn>
        </v-flex>
      </v-layout>
    </v-container>
    <tune v-model="tuned"></tune>
    <setting v-model="settingd" v-on:order="order"></setting>
    <v-dialog v-model="shuffled" :width="size * 6">
      <v-card>
        <v-card-title style="text-transform:none;">
          <div :style="{'font-size':size/2+'px','padding-top':size/8+'px'}">
            重新打乱?
          </div>
        </v-card-title>
        <v-card-actions>
          <v-layout row wrap style="margin: 0%;">
            <v-flex xs12>
              <v-text-field
                style="text-transform:none;"
                :height="size * 0.8"
                :style="{'padding-left': size / 4 + 'px','padding-right': size / 4 + 'px', 'margin-top':size/8 + 'px', 'font-size':size*0.4+'px'}"
                dense
                single-line
                hide-details
                outlined
                v-model="shuffler"
              >
              </v-text-field>
            </v-flex>
            <v-flex xs6 d-flex>
              <v-btn block color="red" text @click="shuffled = false;shuffle();" :height="size">
                <div :style="{'font-size':size/3+'px'}">确定</div>
              </v-btn>
            </v-flex>
            <v-flex xs6 d-flex>
              <v-btn block color="black" text @click="shuffled = false" :height="size">
                <div :style="{'font-size':size/3+'px'}">取消</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="completed" :width="size * 6">
      <v-card>
        <v-card-title style="text-transform:none;">
          <div :style="{'font-size':size/2+'px','padding-top':size/8+'px'}">
            复原成功
          </div>
        </v-card-title>
        <v-card-actions>
          <v-layout row wrap style="margin: 0%;">
            <v-flex xs6 d-flex>
              <v-btn block color="black" text @click="completed = false;" :height="size">
                <div :style="{'font-size':size/3+'px'}">确定</div>
              </v-btn>
            </v-flex>
            <v-flex xs6 d-flex>
              <v-btn block color="red" text @click="completed = false;shuffle();" :height="size">
                <div :style="{'font-size':size/3+'px'}">重试</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-bottom-sheet v-model="stripd" overlay-opacity="0" v-resize="resize">
      <v-card text style="margin: auto;touch-action: none;user-select: none;">
        <v-container fluid grid-list-md text-xs-center :style="{width:Math.min(width, height * 0.6) + 'px'}">
          <v-layout row wrap justify-center align-center>
            <v-flex xs12 style="display: flex;">
              <v-btn
                v-for="i in ['U', 'R', 'F']"
                :key="i"
                @click="strip(i)"
                :color="strips[i]?'primary':''"
                depressed
                style="text-transform:none; min-width: 0%;flex: 1"
                :height="size * 0.8"
                :style="{'font-size':size * 0.3+'px', margin:size * 0.06 + 'px'}"
              >
                <div>{{i}}</div>
              </v-btn>
            </v-flex>
            <v-flex xs12 style="display: flex;">
              <v-btn
                v-for="i in ['e', 'm', 's']"
                :key="i"
                @click="strip(i)"
                :color="strips[i]?'primary':''"
                depressed
                style="text-transform:none; min-width: 0%;flex: 1"
                :height="size * 0.8"
                :style="{'font-size':size * 0.3+'px', margin:size * 0.06 + 'px'}"
              >
                <div>{{i}}</div>
              </v-btn>
            </v-flex>
            <v-flex xs12 style="display: flex;">
              <v-btn
                v-for="i in ['D', 'L', 'B']"
                :key="i"
                @click="strip(i)"
                :color="strips[i]?'primary':''"
                depressed
                style="text-transform:none; min-width: 0%;flex: 1"
                :height="size * 0.8"
                :style="{'font-size':size * 0.3+'px', margin:size * 0.06 + 'px'}"
              >
                <div>{{i}}</div>
              </v-btn>
            </v-flex>
            <v-flex xs12 style="display: flex;">
              <v-btn
                v-for="i in ['Center', 'Edge', 'Corner']"
                :key="i"
                @click="strip(i)"
                :color="strips[i]?'primary':''"
                depressed
                style="text-transform:none; min-width: 0%;flex: 1"
                :height="size * 0.8"
                :style="{'font-size':size * 0.3+'px', margin:size * 0.06 + 'px'}"
              >
                <div>{{i}}</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card>
    </v-bottom-sheet>
  </div>
</v-app>
